{% extends 'user/base.html' %}

{% block content %}
    <div class="flex items-center justify-center min-h-[calc(100vh-100px)]" style="margin-top: -120px">
        <div class="w-full max-w-md bg-white rounded-lg shadow-lg p-8">
            <div class="text-center mb-8">
                <h2 class="text-2xl font-bold text-gray-900">欢迎登录</h2>
            </div>

            <form method="post" class="space-y-6">
                <div>
                    <label for="username" class="block text-sm font-medium text-gray-700 mb-2">用户名</label>
                    <div class="relative">
                        <div class="input-icon absolute inset-y-0 left-0">
                            <i class="fas fa-user text-gray-400"></i>
                        </div>
                        <input type="text"
                               class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-button text-gray-900 placeholder-gray-400"
                               name="username"
                               id="username"
                               placeholder="请输入用户名" required>
                    </div>
                </div>

                <div>
                    <label for="password" class="block text-sm font-medium text-gray-700 mb-2">密码</label>
                    <div class="relative">
                        <div class="input-icon absolute inset-y-0 left-0">
                            <i class="fas fa-lock text-gray-400"></i>
                        </div>
                        <input type="password"
                               class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-button text-gray-900 placeholder-gray-400"
                               name="password"
                               id="password"
                               placeholder="请输入密码" required>
                    </div>
                </div>

                <div>
                    <label for="captcha" class="block text-sm font-medium text-gray-700 mb-2">验证码</label>
                    <div class="relative flex items-center space-x-2">
                        <!-- 验证码输入框 -->
                        <div class="w-3/4">
                            <div class="input-icon absolute inset-y-0 left-0">
                                <i class="fas fa-shield-alt text-gray-400"></i>
                            </div>
                            <input type="text"
                                   class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-button text-gray-900 placeholder-gray-400"
                                   name="captcha"
                                   id="captcha"
                                   placeholder="请输入验证码" required>
                        </div>

                        <!-- 验证码图片 -->
                        <div class="w-1/4 flex-shrink-0">
                            <img id="captcha-img"
                                 src="{{ url_for('user.captcha') }}"
                                 onclick="refreshCaptcha()"
                                 class="w-full h-10 cursor-pointer rounded"
                                 alt="验证码">
                        </div>
                    </div>
                </div>

                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <input id="rememberMe" name="rememberMe" type="checkbox" class="h-4 w-4 text-primary border-gray-300 rounded">
                        <label for="rememberMe" class="ml-2 block text-sm text-gray-700">记住我</label>
                    </div>
                    <a href="{{ url_for('user.reset_password') }}" class="text-sm text-primary hover:text-opacity-80">忘记密码？</a>
                </div>

                <button type="submit"
                        class="w-full bg-primary text-white py-2 px-4 rounded-button hover:bg-opacity-90 transition-colors duration-200 whitespace-nowrap">
                    登录
                </button>

                <div class="text-center text-sm text-gray-600">
                    还没有账号？ <a href="{{ url_for('user.register') }}" class="text-primary hover:text-opacity-80">立即注册</a>
                </div>
            </form>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    {{ super() }}
    <script>
        // 点击验证码图片刷新
        function refreshCaptcha() {
            document.getElementById("captcha-img").src = "{{ url_for('user.captcha') }}?t=" + new Date().getTime();
        }
    </script>
{% endblock %}